<template>
  <div>
    <el-card shadow="always" header="基金比较" class="mb-5">
      <div class="flex items-center">
        <span class="text-sm text-gray-600 mr-2">添加基金比较:</span>
        <SearchFund :nav="false" @change="codeChange" ref="searchRef" />
        <el-button type="primary" class="-ml-3" :disabled="!code || funds.includes(code)"
          @click="addFund">加入比较</el-button>
        <el-button class="ml-2" @click="funds = []">清空列表</el-button>
      </div>
    </el-card>
    <el-card shadow="always" header="当前比较" class="mb-5">
      <el-table :data="jbxx" table-layout="fixed">
        <el-table-column label="基金代码" prop="code"></el-table-column>
        <el-table-column label="基金简称" prop="name"></el-table-column>
        <el-table-column label="类型" prop="type"></el-table-column>
        <el-table-column label="盘中估值">
          <template #default="{ row }">
            <span class="text-bold">
              {{ row.pzgz }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="估值涨幅">
          <template #default="{ row }">
            <rate-text :value="row.gzzf"> </rate-text>
          </template>
        </el-table-column>
        <el-table-column label="最新单位净值">
          <template #default="{ row }">
            <span class="text-bold">{{ row.jz }}</span>
            <span class="text-bold text-gray-400 text-sm ml-1">
              {{ row.jzrq }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="累计净值">
          <template #default="{ row }">
            <span class="text-bold">
              {{ row.ljjz }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="日增长率">
          <template #default="{ row }">
            <rate-text :value="row.rzzl"> </rate-text>
          </template>
        </el-table-column>
        <el-table-column label="上期单位净值">
          <template #default="{ row }">
            <span class="text-bold">{{ row.sqdwjz }}</span>
            <span class="text-bold text-gray-400 text-sm ml-1">
              {{ row.sqjzrq }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="基金经理" prop="manager"></el-table-column>
        <el-table-column label="基金公司" prop="company"></el-table-column>
      </el-table>
    </el-card>
    <el-card shadow="always" header="业绩评级比较" class="mb-5">
      <el-table :data="yjpjbj" table-layout="fixed">
        <el-table-column prop="name" label="基金名称|代码" align="left" header-align="left">
          <template #default="{ row: { name, code } }">
            <div>
              <el-button type="text" @click="toDetail(code)">{{
                name
              }}</el-button>
              <p class="text-gray-400">{{ code }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="w1" label="近1周" align="center" sortable>
          <template #default="{ row: { w1 } }">
            <rate-text :value="w1" :per="false"></rate-text>
          </template>
        </el-table-column>
        <el-table-column prop="m1" label="近1月" align="center" sortable>
          <template #default="{ row: { m1 } }">
            <rate-text :value="m1" :per="false"></rate-text>
          </template>
        </el-table-column>
        <el-table-column prop="m3" label="近3月" align="center" sortable>
          <template #default="{ row: { m3 } }">
            <rate-text :value="m3" :per="false"></rate-text>
          </template>
        </el-table-column>
        <el-table-column prop="m6" label="近6月" align="center" sortable>
          <template #default="{ row: { m6 } }">
            <rate-text :value="m6" :per="false"></rate-text>
          </template>
        </el-table-column>
        <el-table-column prop="yt" label="今年来" align="center" sortable>
          <template #default="{ row: { yt } }">
            <rate-text :value="yt" :per="false"></rate-text>
          </template>
        </el-table-column>
        <el-table-column prop="y1" label="近1年" align="center" sortable>
          <template #default="{ row: { y1 } }">
            <rate-text :value="y1" :per="false"></rate-text>
          </template>
        </el-table-column>
        <el-table-column prop="y2" label="近2年" align="center" sortable>
          <template #default="{ row: { y2 } }">
            <rate-text :value="y2" :per="false"></rate-text>
          </template>
        </el-table-column>
        <el-table-column prop="y3" label="近3年" align="center" sortable>
          <template #default="{ row: { y3 } }">
            <rate-text :value="y3" :per="false"></rate-text>
          </template>
        </el-table-column>
        <el-table-column prop="y5" label="近5年" align="center" sortable>
          <template #default="{ row: { y5 } }">
            <rate-text :value="y5" :per="false"></rate-text>
          </template>
        </el-table-column>
        <el-table-column prop="fn" label="成立来" align="center" sortable>
          <template #default="{ row: { fn } }">
            <rate-text :value="fn" :per="false"></rate-text>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card shadow="always" header="收益率走势对比图" class="mb-5">
      <Line :funds="funds" />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import { ref, watch } from "vue";
import { fundJbxx, fundJbxxRes, fundYjpjbj, FundYjpjbjRes } from "/@/api/fund";
import SearchFund from "/@/layout/components/searchFund.vue";
import Line from "/@/views/Compare/_Components/Line.vue";

const route = useRoute();
const router = useRouter();
const code = ref<string | null>(null);
let q: Array<string>;
if (route.query.codes == null) {
  q = [];
} else {
  q = (route.query.codes as string).split(",");
}
const funds = ref<string[]>(q);
const jbxx = ref<fundJbxxRes[]>([]);
const yjpjbj = ref<FundYjpjbjRes[]>([]);

const codeChange = (value: string | null) => {
  code.value = value;
};

const addFund = () => {
  funds.value.push(code.value as string);
};

const toDetail = (code: string) => {
  router.replace({ name: "Detail", params: { code } });
};

watch(
  funds,
  async () => {
    if (funds.value.length) {
      const {
        data: { Data },
      } = await fundJbxx(funds.value.join(","));
      jbxx.value = Data;
    } else {
      jbxx.value = [];
    }
  },
  { deep: true, immediate: true }
);

watch(
  funds,
  async () => {
    if (funds.value.length) {
      const {
        data: { Data },
      } = await fundYjpjbj(funds.value.join(","));
      yjpjbj.value = Data;
    } else {
      yjpjbj.value = [];
    }
  },
  { deep: true, immediate: true }
);
</script>